<%--
  Created by IntelliJ IDEA.
  User: 12084
  Date: 2024/1/11
  Time: 17:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆界面</title>
<%--    <link rel="stylesheet" type="text/css" href="css/index.css" media="all">--%>
    <style type="text/css">
        *{margin: 0; padding: 0}
        .iplan_title{
            font-family: 幼圆;
            text-align: center;
            margin: 0 auto;
            padding-top: 120px;
        }
        .iplan_title p{
            /*color: #ffffff;*/
            font-size: 40px;
            text-align: center;
            margin: 0 auto;
        }
        .iplan_login_info{
            text-align: center;
            margin: 0 auto;
            padding-top: 30px;
            background-color: #ffffff;
            width: 500px;
            margin-top: 30px;
            opacity: 0.8;
            border-radius: 15px;
        }
        .iplan_login_info p{
            font-size: 20px;
        }
        .iplan_login_info form{
            line-height: 30px;
        }
        .btn_login{
            margin-top: 20px;
            margin-bottom: 40px;
            width: 400px;
            height: 40px;
            border-radius: 5px;
        }
        .input{
            width: 400px;
            height: 40px;
            border-radius: 5px;
            margin-top: 20px;
            padding-left: 30px;
        }
        #manager_id{
            background-image: url(/img/index/role.png);
            background-size: 30px;
            background-repeat: no-repeat;
            background-position: left;
        }
        #password{
            background-image: url(/img/index/unlock.png);
            background-size: 30px;
            background-repeat: no-repeat;
            background-position: left;
        }
        .input_code{
            width: 200px;
            height: 40px;
            border-radius: 5px;
            margin-top: 20px;
        }
        span{
            display: inline-block;
            text-align: left;
        }
        body{
            background-image: url(img/index/background.jpg);
            background-size: cover;
        }
        img{
            display: inline-block;
            vertical-align: bottom;
        }
        .tip{
            height: 10px;
            font-size:10px;
        }
    </style>

    <script type="text/javascript">
        //实现看不清验证码时切换验证码
        //d=time为避免重复，使用time确保每点击一次刷新之后与之前的不同
        function change() {
            var time = new Date().getTime();
            document.getElementById("code").src="CodeImageServlet?d=" + time;
        }
    </script>

</head>
<body>

<div class="iplan_title">
    <p>iPlan权限管理系统</p>
</div>

<div class="iplan_login_info">
    <p>登录</p>
    <span>
      <form name="form1" action="LoginServlet" method="post">
         <input class="input" id="manager_id" title="1" type="text" name="managerId" placeholder="管理员id"/>
        <div class="tip"></div>
        <input class="input" id="password" title="2" type="password" name="managerPassword" placeholder="管理员密码"/>
        <div class="tip"></div>
        <input class="input_code" type="text" name="code">&nbsp&nbsp<img id="code" src="CodeImageServlet" onclick="change()">
          <br>
        <input class="btn_login" type="submit" value="登录"/>
      </form>
    </span>
</div>

<script type="text/javascript">
    var input = document.getElementsByClassName("input");
    var str = ["账户不能为空", "密码不能为空"];
    for (var i = 0; i < input.length; i++) {
        input[i].onfocus = function() {
            var index = this.getAttribute("title");
        }
        input[i].onblur = function() {
            if (!(this.value.length > 0)) {
                var index = this.getAttribute("title");
                this.style.border = "1px solid red";
                this.nextElementSibling.style.color = "red";
                this.nextElementSibling.innerHTML = str[index - 1];
            } else {
                this.style.border = "1px solid #ccc";
                this.nextElementSibling.style.color = "#ccc";
                this.nextElementSibling.innerHTML = "";
            }
        }
    }
</script>

</body>
</html>

